<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>学生管理系统</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 1rem;
        }

        body {
            background-repeat: repeat;
            background-position: right;
        }

        #container {
            padding: 10px;
            margin: 0 auto;
            width: 80%;
            height: 100%;
        }

        .top {
            color: white;
            padding: 10px;
            font-size: 1.25rem;
            font-weight: bold;
        }

        .nav {
            padding: 1.25rem;
        }

        .conter {
            padding: 20px 7%;
            background-color: beige;
        }

        .conter_up {
            text-decoration: none;
            color: #9292ee;
            font-size: 1.5rem;
            font-weight: bold;
            letter-spacing: 0.2rem;
            padding-bottom: 20px;
        }

        .conter_middle table {
            border: 1px solid;
            text-align: center;
            width: 100%;
            font-size: 1.5rem;
            letter-spacing: 0.1rem;
            border: 2px solid black;
        }

        .conter_middle td, th {
            border: 1px solid #6e6767;
            height: 45px;
        }

        .conter_middle a {
            text-decoration: none;
            font-weight: bold;
        }

        .conter_down {
            display: flex;
            justify-content: flex-end;
            padding: 20px;
        }

        .conter_down > * {
            margin-right: 8px;
        }

        .foot {
            padding: 20px;
            color: white;
            display: flex;
            justify-content: center;
        }

        .text1 {
            text-align: center;
        }

        .a1:hover {
            color: red;
        }

        #lss1 {
            float: left;
            margin: 5px;
        }

        #lss2 {
            float: right;
            margin: 5px;
        }
    </style>

    <script>

        function del(id) {
            //添加判断
            if (confirm("你确定要删除这条数据吗？")) {
                //跳转页面
                location.href = "http://localhost:8080/delete?id=" + id;
            }
        }

        function update(id) {
            location.href = "http://localhost:8080/update?id=" + id;
        }

        function addClass() {

        }

    </script>

</head>
<body>
<div id="container">
    <div class="top">
        欢迎进入学生管理信息平台
    </div>
    <div class="conter">
        <div class="conter_up">
            学生信息列表
        </div>
        <div id="lss1">
            <form class="form-inline" th:action="@{/findStudentNews}" method="post">
                <div class="form-group">
                    <label for="studentId">学号</label>
                    <input type="text" name="id" class="form-control" id="studentId">
                </div>
                <div class="form-group">
                    <label for="studentName">姓名</label>
                    <input type="text" name="name" class="form-control" id="studentName">
                </div>
                <div class="form-group">
                    <label for="studentAddress">家庭住址</label>
                    <input type="text" name="address" class="form-control" id="studentAddress">
                </div>
                <button type="submit" class="btn btn-default">查询</button>
            </form>
        </div>
        <div id="lss2">
            <a class="btn btn-primary" th:href="@{/goToAddStudentPage}">添加学生</a>
        </div>
        <div class="conter_middle">
            <table cellspacing="0" cellpadding="0">
                <thead>
                <tr>
                    <th class="text1">学号</th>
                    <th class="text1">姓名</th>
                    <th class="text1">年龄</th>
                    <th class="text1">性别</th>
                    <th class="text1">政治面貌</th>
                    <th class="text1">家庭住址</th>
                    <th class="text1">电话号码</th>
                    <th class="text1">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="student : ${students}">
                    <td th:text="${student.id}">1</td>
                    <td th:text="${student.name}">李书圣</td>
                    <td th:text="${student.age}">admin</td>
                    <td th:text="${student.gender}">书圣同学</td>
                    <td th:text="${student.political}">20</td>
                    <td th:text="${student.address}">20</td>
                    <td th:text="${student.number}">20</td>
                    <td><a class="a1" th:data-id="${student.id}" onclick="del(this.getAttribute('data-id'))">删除</a>
                        <a class="a1" th:data-id="${student.id}" onclick="update(this.getAttribute('data-id'))">修改</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="conter_down">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <th:block th:each="c,s:${count}">
                        <li th:if="${start}==((((${s.count}+5)/6)-1)*6)" class="active">
                            <a th:if="${s.count}%6==1" th:text="(${s.count}+5)/6"
                               th:href="@{/limit(start=(((${s.count}+5)/6)-1)*6,rows=6)}"></a>
                        </li>
                        <li th:if="${start}!=((((${s.count}+5)/6)-1)*6)">
                            <a th:if="${s.count}%6==1" th:text="(${s.count}+5)/6"
                               th:href="@{/limit(start=(((${s.count}+5)/6)-1)*6,rows=6)}"></a>
                        </li>
                    </th:block>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>